<template>
  <div class="editList">
    <back-nav
      :leftArrow="true"
      :title="prop.text"
      :leftText="'返回'"
    ></back-nav>
    <van-address-edit
      :area-list="areaList"
      show-postal
      :show-delete="prop.flag"
      show-set-default
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
      @change-default="onChange"
      :is-saving="saveFlag"
      :is-deleting="deletFlag"
      :address-info="addressInfo"
    />
  </div>
</template>
<script>
import backNav from "../components/BackNav.vue";
import { areaList } from "@vant/area-data";
export default {
  name: "EditList",
  data() {
    return {
      areaList,
      //   保存的加载动画
      saveFlag: false,
      //   删除的加载动画
      deletFlag: false,
      // 是否设为默认地址
      isDefault: false,
      addressInfo: {},
    };
  },
  components: {
    backNav,
  },
  props: {
    prop: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  methods: {
    // 编辑或者添加地址的方法
    toggleSite(url, content) {
      let aid = "";
      let isDefaultFlag = "";
      let data = "";
      aid = content.aid;
      if (this.isDefault) {
        isDefaultFlag = 1;
      } else {
        isDefaultFlag = 0;
      }
      if (url == "/editAddress") {
        data = {
          method: "post",
          url,
          data: {
            name: content.name,
            tel: content.tel,
            province: content.province,
            city: content.city,
            county: content.county,
            addressDetail: content.addressDetail,
            areaCode: content.areaCode,
            postalCode: content.postalCode,
            isDefault: isDefaultFlag,
            aid,
          },
        };
      } else if (url == "/addAddress") {
        data = {
          method: "post",
          url,
          data: {
            name: content.name,
            tel: content.tel,
            province: content.province,
            city: content.city,
            county: content.county,
            addressDetail: content.addressDetail,
            areaCode: content.areaCode,
            postalCode: content.postalCode,
            isDefault: isDefaultFlag,
            aid,
          },
        };
      }
      this.axios(data)
        .then((res) => {
          console.log(res);
          if (res.data.code === 9000) {
            this.$toast(res.data.msg);
          } else if (res.data.code === 30000) {
            this.$toast(res.data.msg);
          }
          this.saveFlag = true;
          setTimeout(() => {
            this.$router.go(-1);
            this.saveFlag = false;
          }, 1000);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    onSave(content) {
      // 说明是编辑地址页面
      if (this.prop.flag) {
        this.toggleSite("/editAddress", content);
      }
      // 说明是增加地址页面
      else {
        this.toggleSite("/addAddress", content);
      }
    },
    onChange(value) {
      this.isDefault = value;
    },
    onDelete() {
      this.deletFlag = true;
      let aid = this.addressInfo.aid;
      this.axios({
        method: "post",
        url: "/deleteAddress",
        data: {
          aid,
        },
      })
        .then((res) => {
          if (res.data.code == 10000) {
            this.$toast(res.data.msg);
            setTimeout(() => {
              this.deletFlag = false;
              this.$router.go(-1);
            }, 1000);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 编辑地址获取地址的方法
    editSite() {
      let aid = this.$route.query.aid;
      this.axios({
        method: "get",
        url: "/findAddressByAid",
        params: {
          aid,
        },
      })
        .then((res) => {
          if (res.data.code === 40000) {
            this.addressInfo = res.data.result[0];
          }
          if (this.addressInfo.isDefault === 1) {
            this.addressInfo.isDefault = true;
          } else {
            this.addressInfo.isDefault = false;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    this.editSite();
  },
};
</script>
<style lang="less" scoped>
@import url("../assets/base.less");
/deep/ .van-button--danger {
  background-color: @mainColor;
  border-color: @mainColor;
}
/deep/ .van-button--default {
  background-color: #ee0a24;
  border-color: #ee0a24;
  color: #fff;
}
/deep/ .van-switch--on{
   background-color: @mainColor;
}
</style>